<template>
    <div class="searchContainer">
        <van-search 
            placeholder="请输入搜索关键词"
            v-model="value"
            @search="onSearch"
            @cancel="onCancel"
            shape="round"
            @keypress="searchGoods"
        />
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 输入内容
            value: '',
            // 右侧按钮关键词
            btnTxt: '搜索'
        }
    },
    methods: {
        // 按了搜索按钮
        onSearch() {
            console.log('搜索一次')
        },
        // 按了取消按钮
        onCancel() {
            this.value = ''
        },
        // 监听搜索框
        searchGoods() {
            console.log('有值')
        }
    }
}
</script>

<style lang="stylus">
    .van-search
        background transparent!important
        .searchContainer
            background transparent
        .van-search__action
            color #fff
</style>
